<template>
  <div class="order">
    <div class="header">
      <div class="navbar">
        <van-icon name="arrow-left" @click="back"
                  size="0.5rem" />
      </div>
      <div class="van-cell-group">
        <van-cell title="只有你"
                  :border='false'
                  class="header-movie" />
        <div class="movie-msg">今天2月1日 17:10（原版2D)</div>
        <div class="cinema-msg"> 耀莱成龙影城（建业店） </div>
        <div class="seat-msg"> 
          <span v-for="it in orderList" :key="it[0]+''+ it[1]">
            {{it[0] +1}}排{{it[1] + 1}}座
          </span>
        </div>
      </div>
    </div>
    <div class="ticket-detail">
      <div class="ticket-title">
        <p>优惠券</p>
        <p>会员卡</p>
        <p>票价总计</p>
        <p>手机号</p>
        <span>购票成功后将收到取票码</span>
      </div>
      <div class="ticket-item">
        <p>
          {{coupon}}张优惠卷可用 <span>></span>
        </p>
        <p> 去使用 <span>></span> </p>
        <p class="ticket-price">{{orderList.length *33 }} 元 </p>
        <p class="ticket-phone">13856387899 </p>
      </div>
    </div>
    <div class="count">
      <div class="recommend">
        <div class="recommend-title">查看退票、改签协议</div>
        <div class="recommend-type">
          <p>还需支付 ：</p>
          <div @click="recommend(1)">
            <p>{{this.orderList.length * 33}}元 </p>
            <svg t="1595302264774"
                 class="icon"
                 viewBox="0 0 1024 1024"
                 version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="6828"
                 width="200"
                 height="200">
              <path d="M745.376 662.624L512 429.248l-233.376 233.376-45.248-45.248L512 338.752l278.624 278.624z"
                    fill="#ffffff"
                    p-id="6829"></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="submit">
        <router-link tag="div"
                     to="home"
                     class="settle"
                     @click="submit(pickedList)"> 确认订单 </router-link>

      </div>
    </div>

  </div>
</template>

<script>
import {mapState} from 'vuex'
import { log } from 'util';
export default {
	name: 'order',
	data() {
		return {
      orderList:[[1,2],[2,3]]
    }
	},
	computed: {
		coupon() {
			return 1
    },
    ...mapState({
      ticketList: function(state){
        const list = state.ticket.ticketList
        const ti = []
        for (let i =0; i < list.length; i++){
          for(let j = 0; j < list[i].length ; j++){
            if(list[i][j] == 1){
              ti.push([i,j])
            }
          }
        }
        this.orderList = ti
        return list
      }
    })
  },
  methods: {
    back(){
    this.$router.back()
    }
  },
  mounted(){
    console.log(this.ticketList,this.orderList);
  }
}
</script>

<style lang='scss'>
div.order {
	color: #fff;

	.header {
		// background: url(~@/asseet);
		background: url(~@/assets/images/cinema/order/order1.png) no-repeat center;
		background-size: cover;
		background-position: 0 0;
		.navbar {
			padding-top: 20px;
			background-color: black;
			opacity: 0.67;
			height: 50px;
			line-height: 50px;
			padding-left: 33px;
			i {
				line-height: 50px;
			}
		}
		.van-cell-group {
			background-color: black;
			opacity: 0.67;
			padding-left: 40px;
			padding-bottom: 80px;
			div {
				opacity: 0.67;
				height: 40px;
				background-color: black;
				line-height: 40px;
				margin-bottom: 20px;
				font-family: PingFangSC-Regular;
				font-size: 28px;
				color: #ffffff;
			}
			.header-movie {
				padding-left: 0px;
				background-color: black;
				opacity: 0.67;
				height: 67px;
				div {
					height: 67px;
					line-height: 67px;
					span {
						color: #ffffff;
						opacity: 1;
						font-size: 48px;
						height: 67px;
						text-align: center;
						line-height: 67px;
					}
				}
			}
			// .seat-msg{

			// }
		}
	}
	.ticket-detail {
		height: 438px;
		width: 670px;
		margin: 0 auto;
		background: #33363d;
		border-radius: 12px;
		display: flex;
		justify-content: space-between;
		.ticket-title {
			width: 40%;
			padding-left: 18px;
			p {
				font-size: 32px;
				line-height: 32px;
				color: #ffffff;
				padding-top: 39px;
			}
			span {
				opacity: 0.71;
				font-family: PingFangSC-Regular;
				font-size: 24px;
				color: #ffffff;
				padding-top: 7px;
			}
		}
		.ticket-item {
			padding-right: 22px;
			p {
				text-align: right;
				font-size: 24px;
				line-height: 32px;
				color: #f9c34a;
				padding-top: 39px;
				span {
					opacity: 0.78;
					color: #f9c34a;
					font-size: 32px;
				}
			}
			span {
				opacity: 0.71;
				font-family: PingFangSC-Regular;
				font-size: 24px;
				color: #ffffff;
				padding-top: 7px;
			}
			p.ticket-price {
				font-size: 40px;
				color: #c21313;
			}
			p.ticket-phone {
				font-size: 28px;
				color: #ffffff;
				opacity: 0.71;
			}
		}
	}
	.count {
		position: absolute;
		bottom: 36px;
		left: 0;
		width: 750px;
	}
	.recommend {
		height: 50px;
		width: 670px;
		margin: 0 auto 60px;
		display: flex;
		.recommend-title {
			opacity: 0.5;
			font-size: 24px;
			color: #ffffff;
      margin: 12 24 0 0；
		}
		.recommend-type {
			width: 400px;
			display: flex;
			justify-content: flex-end;
			p {
				line-height: 50px;
				height: 50px;
				text-align: center;
				line-height: 46px;
				opacity: 0.53;
				font-size: 28px;
			}
			div {
				display: flex;
				// width: 324px;
				line-height: 50px;
				height: 50px;
				justify-content: flex-end;
				p {
					line-height: 50px;
					height: 50px;
					text-align: center;
					line-height: 46px;
					font-size: 44px;
					color: red;
				}
				svg {
					line-height: 50px;
					height: 50px;
					width: 60px;
					color: #ffffff;
				}
			}
		}
	}
	.submit {
		margin-left: 40px;
		width: 100%;
		.settle {
			width: 670px;
			height: 80px;
			background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
			box-shadow: 0 0 8px 2px rgba(242, 109, 125, 0.18);
			border-radius: 12px;
			border-radius: 12px;
			// opacity: 0.44;
			font-size: 36px;
			color: #ffffff;
			text-align: center;
			line-height: 80px;
			font-weight: bold;
		}
	}
}
</style>
